<template>
  <view class="content">
    <!-- 轮播图区域 -->
    <swiper indicator-dots autoplay circular class="swiper">
      <swiper-item
        v-for="item in swiperList"
        :key="item.id"
        class="swiper_item"
      >
        <image :src="item.image_src" mode=""></image>
      </swiper-item>
    </swiper>
    <!-- 导航区域 -->
    <view class="nav">
      <view
        class="nav_item"
        v-for="nav_item in navList"
        :key="nav_item.id"
        @click="handleNavItemChange(nav_item.url)"
      >
        <text :class="nav_item.icon"></text>
        <view class="nav_name">{{ nav_item.name }}</view>
      </view>
    </view>
    <view class="recommend_title">推荐商品</view>
    <goodsList @goodsItemId="getGoodsId" :goodsList="goodsList"></goodsList>
  </view>
</template>

<script>
import goodsList from "../../compents/goods_list.vue";
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      // 导航数据
      navList: [
        {
          url: "../goods/goods?cid=5",
          id: 0,
          name: "黑马超市",
          icon: "iconfont icon-gouwudai",
        },
        {
          url: "../contact/contact",
          id: 1,
          name: "联系我们",
          icon: "iconfont icon-guanyuwomen",
        },
        {
          url: "../pics/pics",
          id: 2,
          name: "社区图片",
          icon: "iconfont icon-icon-",
        },
        {
          url: "../videos/videos",
          id: 3,
          name: "学习视频",
          icon: "iconfont icon-shipin",
        },
      ],
      //   商品推荐数据
      goodsList: [],
    };
  },
  // 商品数据
  queryParams: {
    query: "",
    cid: "",
    pagenum: 1,
    pagesize: 10,
  },
  onLoad() {
    this.getSwipers();
    this.getGoodsList();
  },
  methods: {
    //   获取轮播图数据
    async getSwipers() {
      let res = await this.$myRequest({
        url: "/home/swiperdata",
      });
      this.swiperList = res;
    },
    // 获取商品推荐数据
    async getGoodsList() {
      let res = await this.$myRequest({
        url: "/goods/search",
        data: this.queryParams,
      });
      this.goodsList = res.goods;
    },
    // 点击 nav 跳转
    handleNavItemChange(url) {
      uni.navigateTo({
        url,
      });
      console.log(url);
    },
    // 点击跳转
    getGoodsId(e) {
      console.log(e);
      uni.navigateTo({
        url: "../detail/detail?goods_id=" + e,
      });
    },
  },
  components: {
    goodsList: goodsList,
  },
};
</script>

<style lang="less" scoped>
.content {
  background-color: #efefef;
  //   轮播图区域
  swiper {
    width: 750rpx;
    height: 380rpx;
    swiper-item {
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  //   导航栏区域
  .nav {
    background-color: #fff;
    padding: 20rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .nav_item {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 130rpx;
        height: 130rpx;
        background-color: #c21e02;
        color: #fff;
        border-radius: 50%;
        font-size: 56rpx;
      }
      .nav_name {
        margin-top: 20rpx;
      }
    }
  }
  //   标题
  .recommend_title {
    width: 100%;
    height: 110rpx;
    background-color: #fff;
    margin-top: 10rpx;
    text-align: center;
    line-height: 110rpx;
    color: #b55751;
    font-size: 40rpx;
    margin: 10rpx 0;
    letter-spacing: 32rpx;
  }
}
</style>
